import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import { Card, Row, Col, Tree, Tag, Pagination, Table, Button } from 'antd'
import type { DataNode, TreeProps } from 'antd/es/tree'
import { reqHospitalScheduleDep } from '@api/hospital/hospitalList'
import { IdepList } from '@api/hospital/model/hospitalListTypes'
const treeData: DataNode[] = [
  {
    title: 'parent 1',
    key: '0-0',
    children: [
      {
        title: 'parent 1-0',
        key: '0-0-0',
        disabled: true,
        children: [
          {
            title: 'leaf',
            key: '0-0-0-0',
            disableCheckbox: true,
          },
          {
            title: 'leaf',
            key: '0-0-0-1',
          },
        ],
      },
      {
        title: 'parent 1-1',
        key: '0-0-1',
        children: [
          {
            title: <span style={{ color: '#1890ff' }}>sss</span>,
            key: '0-0-1-0',
          },
        ],
      },
    ],
  },
]

const columns = [
  {
    title: '序号',
  },
  {
    title: 'test',
  },
]
export default function HospitalSchedule() {
  const { hoscode } = useParams()
  // 所有的科室数据的状态
  const [depList, setDepList] = useState<IdepList>([])
  // 所有的一级科室的depcode的数组状态
  const [depCodeList, setDepCodeList] = useState<string[]>([])
  useEffect(() => {
    // 获取当前医院科室数据
    getDepList()
  }, [])

  // 获取当前医院所有科室数据的函数
  const getDepList = async () => {
    // 获取hoscode
    const result = await reqHospitalScheduleDep(hoscode as string)
    // depCodeList是存放了所有一级科室的depcode的数组
    const depCodeList = result.map((item) => {
      // 返回一级科室的depcode
      return item.depcode
    })

    // 给所有的一级科室的数据对象,添加disabled:true.让一级科室禁用
    result.forEach((item) => {
      item.disabled = true
    })
    setDepCodeList(depCodeList)
    setDepList(result)
  }
  // 选择树结构中某个节点,会触发这个函数
  const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => {
    console.log('selected', selectedKeys, info)
  }

  return (
    <Card>
      <p>选择：北京协和医院 / 多发性硬化专科门诊 / 2022-04-28</p>
      {/* 是antd中的栅格系统(Grid), Row表示一行, Col表示一列. Col的span表示这一类在一行中占多少份. 一行是24份 */}
      {/* gutter表示一行中,每一列之间的间隔.单位是px */}
      <Row gutter={20}>
        <Col span={5}>
          <div
            style={{ border: '1px solid #ccc', height: 800, overflow: 'auto' }}
          >
            <Tree
              onSelect={onSelect} // 点击树结构中的某一个节点会触发的函数
              treeData={depList as []} // treeData表示树结构中展示的数据
              // Tree组件默认渲染treeData里面对象的title和key . 但是我们的数据中没有这两个字段,所以告诉Tree组件,应该渲染的是depname和depcode
              fieldNames={{
                title: 'depname',
                key: 'depcode',
              }}
              // 让树结构中,指定的某些节点展示的配置项
              expandedKeys={depCodeList}
            />
          </div>
        </Col>
        <Col span={19}>
          <div>
            <Tag>
              <div>2022-04-28 周四</div>
              <div>38 / 100</div>
            </Tag>
            <Tag>
              <div>2022-04-28 周四</div>
              <div>38 / 100</div>
            </Tag>
            <Tag>
              <div>2022-04-28 周四</div>
              <div>38 / 100</div>
            </Tag>
          </div>
          <Pagination
            total={50}
            style={{ marginTop: 10, marginBottom: 10 }}
          ></Pagination>

          <Table columns={columns} bordered></Table>
          <Button style={{ marginTop: 20 }}>返回</Button>
        </Col>
      </Row>
    </Card>
  )
}
